<template>
  <div style="padding:15px;">
    <div class="label" style="padding-top:20px;">修改密码：</div>
    <div class="label-item">原有密码:</div>
    <div style="width:400px">
      <el-input show-password v-model="form.old"></el-input>
    </div>
    <div class="label-item">新密码:</div>
    <div style="width:400px">
      <el-input show-password v-model="form.new"></el-input>
    </div>
    <div class="label-item">再次输入新密码:</div>
    <div style="width:400px">
      <el-input show-password v-model="form.new2"></el-input>
    </div>
    <div style="text-align:center;width:400px;padding-top:15px;">
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import md5 from "md5";
import { reqChange } from "../../api";
export default {
  data() {
    return {
      form: {
        old: "",
        new: "",
        new2: "",
        id: ""
      }
    };
  },
  methods: {
    submit() {
      if (
        this.form.new.trim() === "" ||
        this.form.new2.trim() === "" ||
        this.form.old.trim() === ""
      ) {
        this.$message({
          message: "不准为空",
          type: "error"
        });
        return;
      }
      if (this.form.new.trim() != this.form.new2.trim()) {
        this.$message({
          message: "两次新密码不一致",
          type: "error"
        });
        return;
      }
      this.form.old = md5(this.form.old.trim());
      this.form.new = md5(this.form.new.trim());
      this.form.id = JSON.parse(localStorage.token_data).id;
      reqChange(this.form)
        .then(res => {
          if (res.result == "0") {
            this.$message({
              message: "修改密码成功",
              type: "success"
            });
            this.form = {
              old: "",
              new: "",
              new2: "",
              id: ""
            };
          } else {
            this.$message({
              message: "原密码错误",
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "发生未知错误",
            type: "error"
          });
        });
    }
  }
};
</script>

<style scoped>
.label {
  font-size: 20px;
  margin-bottom: 15px;
}
.label-item {
  font-size: 15px;
  padding: 15px 0;
}
.ui-upload {
  height: 30px;
  width: 80px;
  background-color: #00abff;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  margin-left: 20px;
  position: relative;
  bottom: 10px;
}
</style>